<template>
  <section>

    <div class="mb10">
      <router-link :to="{name: 'MessageNoticeList'}">
        <div class="flex flex-row flex-center bg-color-white pl10 pr10 pt20 pb20 font-big">
          <div class="flex flex-row flex-left flex-centerV flex-1">
            <i class="iconfont icon-tongzhi mr5 color-black-light" />
            <span class="color-black-light">系统通知</span>
            <img :src="STATIC_BASE_URL + 'images/ico-new.png'" class="ml5" v-if="newMsgAmount.system_notice > 0" height="20" />
          </div>
          <div class="flex flex-row flex-center">
            <i class="iconfont icon-right-arrow color-black-light" />
          </div>
        </div>
      </router-link>
    </div>

    <div class="bg-color-white"
         v-for="(item, index) in sessions"
         :key="index"
          @click="$router.push({name: 'MessageSend', query: {userId: item.sender.member.user_id}})">
      <van-swipe-cell>
        <div class="flex flex-row pd10 flex-centerV border-bottom-gray session-item">
          <div class="flex flex-row relative">
            <img :src="item.sender.user.avatar_url ? item.sender.user.avatar_url : STATIC_BASE_URL + '/images/mp/gender.png'" class="avatar" />
            <i class="new-badge" v-if="!item.last_session.read" />
          </div>

          <div class="flex flex-1 flex-col font-common pl10">
            <div class="flex flex-row">
              <div class="flex flex-row flex-left flex-1 font-big strong">{{item.sender.user.nick}}</div>
              <div class="flex flex-row flex-right flex-1 color-gray">{{item.last_session.send_time|timeFormat('MM/dd hh:mm:ss')}}</div>
            </div>
            <div class="flex flex-row flex-left mt5">{{item.unlock ? item.last_session.msg : '有一条新私信'}}</div>
          </div>
        </div>

        <template #right>
          <van-button square type="danger" text="删除" size="small" />
        </template>
      </van-swipe-cell>
    </div>

    <Tabbar active="message"/>
  </section>
</template>

<script>
  import Tabbar from '../componets/Tabbar';
  import {chatMessageNewAmountUri, chatMessageSessionsUri, STATIC_BASE_URL} from "../../common/api";
  import Vue from 'vue';
  import {Toast, SwipeCell} from "vant";
  Vue.use(Toast).use(SwipeCell);

  export default {
    components: {
      Tabbar: Tabbar
    },
    data() {
      return {
        STATIC_BASE_URL: STATIC_BASE_URL,
        sessions: [],
        newMsgAmount: {system_notice: 0, chat_message: 0}
      }
    },
    methods: {
      getNewAmount() {
        const that = this;
        const url = chatMessageNewAmountUri;
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code == 0) {
            that.newMsgAmount = data;
          }
        }, response => {
          // error callback
        })
      },
      getSessions() {
        const that = this;
        const url = chatMessageSessionsUri;
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            that.toast(msg);
          } else {
            that.sessions = data.sessions;
          }
        }, response => {
          // error callback
        })
      },
    },
    mounted: function () {
      if(this.GLOBAL.userInfo) {
        this.getSessions();
        this.getNewAmount();
      }
      this.EventBus.$on('OnUserLogined', () => {
        this.getSessions();
        this.getNewAmount();
      });

      this.EventBus.$on('OnMessageReceived', (message) => {
        this.getSessions();
      });
    }
  }
</script>

<style scoped>
  .session-item .new-badge {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 1;
    height: 6px;
    width: 6px;
    border-radius: 3px;
    background: #ff0000;
  }
  .session-item .avatar {
    height: 40px;
    width: 40px;
    border-radius: 20px;
  }
</style>
